import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "./cart.scss";
import axios from "../../utils/myaxios";
import bg from "../../assets/images/cartbg.png";
import { connect } from "react-redux";
import timg from "../../assets/images/timg.gif"
class Cart extends Component {
  state = {
    isNull: false,
    allPrice:0,
    timg:true,
    shopList: [
      {
        shopID: 1,
        picture: "uploads/6666/resize_w_150.jpg",
        shopName: "汤小鲜和范小满(固戍店)",
        monthlySales: "4246",
        startingPrice: "20",
        deliveryFee: 0,
        deliveryTime: "42分钟",
        tip: "盖浇饭",
        distance: 2.47,
        productName: "毛血旺(不配饭)-大份3000g",
        price: 48.8,
        size: "大份",
        taste: "不含辣",
        productnum: 1,
        shopDiscount: "满27减10,满30减12,配送费立减4元",
      },
    ],
  };
  componentDidMount() {
    // 获取购物车列表
    axios
      .post("user/getAllCartByUserID", {
        userID: this.props.userID,
      })
      .then((res) => {
        if (res.code === 200) {
          this.setState(
            {
              timg:false,
              shopList: res.results,
            },
            () => {
              // 设置总价
              let allPrice = 0
              this.state.shopList.map(v=>{
                return allPrice +=v.price*v.productnum
              })
              this.setState({
                allPrice:allPrice
              })
              if (this.state.shopList.length === 0) {
                this.setState({
                  isNull: true,
                });
              }
            }
          );
        }
      });
  }
  clear(cartID,index) {
    let newShopList = JSON.parse(JSON.stringify(this.state.shopList))
    newShopList.splice(index,1)
    axios.post("/user/deleteCart",{
      cartID:cartID
    }).then(res=>{
      if(res.code===200){
        this.setState({
          shopList:newShopList
        },()=>{
          if(this.state.shopList.length===0){
            this.setState({
              isNull:true
            })
          }
        })
      }
    })
  }
  render() {
    return (
      <div>
        <div className="load" style={{display:this.state.timg?"block":"none"}}>
              <img src={timg} alt="" style={{width:"100%",height:"100%"}}/>
        </div>
        {/* 购物车顶部导航栏 */}
        <div style={{display:this.state.timg?"none":"block"}}>
          <div className="cartTopNav">
            <div className="topNavLeft">
              <svg
                className="icon"
                aria-hidden="true"
                onClick={() => {
                  this.props.history.push("/user");
                }}
              >
                <use href="#icon-zuojiantou"></use>
              </svg>
            </div>
            <div className="topNavCenter">
              <span>购物车</span>
            </div>
          </div>
          {/* 购物车主要内容 */}
          <div className="cartList">
            {/* 当购物车为空时显示 */}
            <div
              className="cartNull"
              style={{ display: this.state.isNull ? "block" : "none" }}
            >
              <div className="cartNullContent">
                <div className="cratbg">
                  <img src={bg} alt="" />
                </div>
                <div>没有可结算的商品</div>
              </div>
            </div>
            {/* 购物车有内容时显示 */}
            {/*  */}
            <div style={{ display: this.state.isNull ? "none" : "block"}}>
              {this.state.shopList.map((v,index) => {
                return (
                  <div className="listItem" key={index}>
                    <div className="listTop">
                      <div className="shopName">
                        <h2>
                          {v.shopName}
                          <svg
                            className="icon"
                            style={{ width: "12px", height: "12px" }}
                          >
                            <use href="#icon-you"></use>
                          </svg>
                        </h2>
                      </div>
                      <div className="shopRight">
                        <span>{"月销" + v.monthlySales}</span>
                        <span>{v.deliveryTime + "分钟"}</span>
                        <svg
                          className="icon"
                          style={{ width: "12px", height: "12px" }}
                          onClick={this.clear.bind(this,v.cartID,index)}
                        >
                          <use href="#icon-shanchu2"></use>
                        </svg>
                      </div>
                    </div>
                    <div className="listMiddle">
                      <div className="listMiddleImg">
                        <img
                          src={"http://175.24.122.212:9090/"+v.picture}
                          alt=""
                        />
                      </div>
                      <div className="product">
                        <div className="productLeft">
                          <h4>{v.productName}</h4>
                          <p>配料：{v.material}</p>
                          <p>{"x" + v.productnum}</p>
                        </div>
                        <div className="productRight">{"￥" + v.price}</div>
                      </div>
                    </div>
                    <div className="listBottom">
                      {/* <div className="packingPrice">
                        <span>包装费</span>
                        <span>x{v.productnum}</span>
                      </div>
                      <div className="activity">
                        <span>店铺满38-12</span>
                        <span>-￥12</span>
                      </div> */}
                    </div>
                  </div>
                );
              })}
              <div className="pay">
                {/* <span>已经优惠<span>￥12</span></span> */}
                <div className="payRight">
                  <div>
                    <span>
                      合计:<span>￥{this.state.allPrice}</span>
                    </span>
                    <span>另需要运费￥0</span>
                  </div>
                  <div>去结算</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    userID:state.loginReducer.userInfo["0"].userID,
  };
};
export default connect(mapStateToProps)(withRouter(Cart));
